<script setup lang="ts">
import {theme} from "@/components/common/f_theme";
import {dateTimeFormat} from "@/utils/date";
import {reactive, ref, watch} from "vue";
import {chatListApi, type chatListParamsType, type chatType} from "@/api/chat_api";
import type { listResponse} from "@/api";
import {MdPreview} from 'md-editor-v3';
import 'md-editor-v3/lib/preview.css';
import F_avatar from "@/components/common/f_avatar.vue";

interface Props {
  sessionId: number
  isCheck?: boolean
  checkIdList?: number[]
}

const props = defineProps<Props>()
const emits = defineEmits(["update:checkIdList"])
const chatListParams = reactive<chatListParamsType>({
  sessionID: 0,
  limit: 10,
  page: 1,
})
const chatData = reactive<listResponse<chatType>>({
  list: [],
  count: 0,
})

function checkChange(data: (string | number | boolean)[]) {
  emits("update:checkIdList", data)
}

async function getChatList(params: chatListParamsType) {
  checkChange([])
  if (params.sessionID === 0){
    return
  }
  const res = await chatListApi(params)
  res.data.list.reverse()
  Object.assign(chatData, res.data)
}

function inChatIDList(id: number): boolean {
  const item = props.checkIdList?.find((item) => item === id)
  if (item) {
    return true
  }
  return false
}

async function getMore() {
  chatListParams.page = (chatListParams.page as number) + 1
  chatListParams.sessionID = props.sessionId
  const res = await chatListApi(chatListParams)
  res.data.list.reverse()
  chatData.count = res.data.count
  chatData.list = [...res.data.list, ...chatData.list]
}

function pushMsg(msg: chatType) {
  chatData.list.push(msg)
  chatData.count = chatData.list.length
}



function getChatIDList() {
  const idList: number[] = []
  for (const chat of chatData.list) {
    idList.push(chat.id)
  }
  return idList
}

watch(() => props.sessionId, () => {
  // 如果是通过这里过来的，分页参数必须归位
  chatListParams.page = 1
  getChatList({sessionID: props.sessionId})
}, {immediate: true})
function getSrc(src: string){
  if (src.startsWith("/")){
    return src
  }
  if (src.startsWith("http")){
    return  src
  }
  return  "/" + src
}
defineExpose({
  getChatIDList,
  getChatList,
  pushMsg
})

</script>

<template>
  <div class="f_chat_record scrollbar">
    <div class="more" v-if="(chatListParams.page as number) * (chatListParams.limit as number) < chatData.count">
      <a-button @click="getMore" type="text">加载更多</a-button>
    </div>
    <a-checkbox-group @change="checkChange" :model-value="props.checkIdList">
      <div class="item_p" :class="{check: inChatIDList(item.id)}" v-for="item in chatData.list">
        <a-checkbox v-if="props.isCheck" :value="item.id"></a-checkbox>
        <div class="date">{{ dateTimeFormat(item.createdAt) }}</div>
        <div class="item user_item">
          <div class="user">
            <div class="content_container">
              <div class="content">{{ item.userContent }}</div>
              <div class="images" v-if="item.imageList.length">
                <a-image :height="50" v-for="src in item.imageList" :src="getSrc(src)"></a-image>
              </div>
            </div>
            <div class="avatar">
              <f_avatar :title="item.userNickname" :image-url="item.userAvatar"></f_avatar>
            </div>
          </div>
        </div>
        <div class="item ai_item">
          <div class="roleTitle">{{ item.roleTitle }}</div>
          <div class="ai">
            <div class="avatar">
              <f_avatar :title="item.roleTitle" :image-url="item.roleAvatar"></f_avatar>
            </div>
            <div class="content">
              <MdPreview :theme="theme as 'dark'" :model-value="item.aiContent"></MdPreview>
            </div>
          </div>
        </div>
      </div>
    </a-checkbox-group>
  </div>
</template>

<style lang="less">
.f_chat_record {
  min-height: calc(100vh - 48px - 48px);
  //max-height: calc(100vh - 48px);
  overflow: auto;
  padding: 20px;

  .more {
    display: flex;
    justify-content: center;
  }

  .arco-checkbox-group {
    width: 100%;
  }

  .item_p {
    padding: 20px;
    margin-top: 5px;
    position: relative;
    &:last-child{
      margin-bottom: 20px;
    }

    .date {
      position: absolute;
      right: 20px;
      top: 25px;
      font-size: 12px;
      color: var(--color-text-2);
    }
  }

  .item_p.check {
    background-color: var(--color-fill-2);
    border-radius: 5px;
  }

  .item {
    display: flex;
    margin-top: 20px;

    .content {
      background-color: var(--color-fill-1);
      padding: 10px;
      border-radius: 5px;
      position: relative;

      &::after {
        position: absolute;
        width: 0;
        height: 0;
        border-width: 10px;
        content: "";
        display: block;
        border-style: solid;
        border-color: transparent;
      }
    }
  }

  .user_item {
    justify-content: end;
    margin-top: 5px;

    .user {
      display: flex;
      justify-content: end;
      .content_container{
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: end;
      }

      .content {
        margin-right: 20px;
        width: fit-content;
        white-space: break-spaces;
        color: var(--color-text-2);

        &::after {
          right: -20px;
          top: 11px;
          border-left-color: var(--color-fill-1);
        }
      }

      .images {
        display: flex;
        flex-wrap: wrap;
        justify-content: end;
        margin-top: 5px;
        width: 100%;
        overflow-x: auto;
        margin-right: 15px;

        .arco-image {
          margin-right: 5px;
          min-width: 50px;
          border-radius: 5px;
          margin-bottom: 5px;
        }
      }
    }
  }

  .user, .ai {
    width: 80%;
  }

  .ai_item {
    justify-content: start;
    flex-direction: column; // 确保内部元素垂直排列
    .roleTitle {
      font-weight: bold; // 你可以根据需要调整样式
      margin-bottom: 5px; // 与 .ai 之间的间距
      color: var(--color-text-1); // 根据需要调整颜色
    }

    .ai {



      display: flex;

      .content {
        margin-left: 20px;

        &::after {
          left: -20px;
          top: 11px;
          border-right-color: var(--color-fill-1);
        }
      }
    }
  }

  .md-editor-previewOnly {
    background-color: transparent;

    .md-editor-preview-wrapper {
      padding: 0;
    }
  }
}

</style>